<!--Created by 王童 on 2018/5/24-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <style>
        label {
            cursor: pointer;
            color: #080808;
        }

        .curr {
            color: #ac2925;
        }

        .curr1 {
            color: #2E8B57;
        }

        #answer {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">

    <div v-for="(item,index) in result" id="wrap">
        <div v-show="false">{{item.pro_id}}</div>
        <span style="color:#080808 ">{{item.pro_name}}</span>
        <template v-if="item.type.type_id=='5'">
        <div id="choices" v-for="(value,key) in item.pro_mapname">
           <input type="checkbox" :value="key" name="radines" class="rad" :id="key" v-model="checkedNames" > <label :for="key">{{key}}:{{value}} </label><br/>

        </div>
            <input type="button" onclick="btn()" value="显示答案" width="50px">
        </template>
        <template v-else>
            <div id="choice" v-for="(value,key) in item.pro_mapname">
            <input type="radio" :value="key" name="radin" class="rod" :id="key" onclick="fun()"><label :for="key">{{key}} :{{value}}</label><br/>
        </template>
        <div id="answer">答案为：
            <div type="text" id="div1">{{item.p_true}}</div>
            答案解析是：
            <div>{{item.true_res}}</div>
        </div>
    </div>
    <div id="pagenav"></div>

</div>
<script>

    function funs() {
        $("#answer").css("display", "none");
    }
var p_true2;
    var app = new Vue({
        el: '#app',
        data: {
            result: {},
            type_ids: '',
            checkedNames:[]
        }

    });


    var radios = $('input[name="radin"]');
    for (var i = 0; i < radios.length; i++) {
        function fun() {
            var pro_id=app.result[0].pro_id;
            console.log(pro_id);
            var name = $('input[name="radin"]:checked').val();
            if (p_true2 == name) {
                $("#answer").css("display", "none");
                $(":checked").next().addClass("curr1").siblings().removeClass("curr1");
                $(":checked").next().addClass("curr1").siblings().removeClass("curr");
            } else {
                $("#answer").css("display", "block");
                $("#answer").css("color", "#DC143C");
                $(":checked").next().addClass("curr").siblings().removeClass("curr");
                $(":checked").next().addClass("curr").siblings().removeClass("curr1");
                var student_id=1;
                $.ajax({
                    type:'get',
                    dataType:'json',
                    url:"/falsePrac/saveFlase.do?pro_id="+pro_id+"&student_id=" + student_id
                });
            }
        }
    }
    function btn() {
        if ($("#answer").css("display") == "none") {
            $("#answer").show();
        } else {
            $("#answer").hide();
        }
        compare();


    }
    function compare(){
        var p_true1=p_true2.length;
        var stu_true=app.checkedNames.length;
        console.log(p_true1);
        console.log(stu_true);
        if(stu_true==p_true1){
            $("#answer").addClass("curr1");
            console.log("true");
        }else{
            console.log("false");
            $("#answer").addClass("curr");
            var pro_id=app.result[0].pro_id;
            console.log(pro_id);
            var student_id=1;
            $.ajax({
                type:'get',
                dataType:'json',
                url:"/falsePrac/saveFlase.do?pro_id="+pro_id+"&student_id=" + student_id
            });
        }
    }

//分页
    var getUserPageList = function (curr) {

        var point_id = "${point_id}";
        var grade = "${grade}";
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/practice/getlist.do?point.point_id=" + point_id + "&grade=" + grade,
            data: {
                pageNum: curr || 1,
                pageSize: 1,
            },
            success: function (msg) {
                $('input').removeAttr('checked');
                $("#choices").children().removeAttr("checked");
                $("input:checkbox").removeAttr("checked");
                app.result = msg.page;
                type_ids = app.result[0].type.type_id;
                p_true2 = app.result[0].p_true;
                console.log(type_ids);
                removeCheck();
                laypage({
                    cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                    pages: msg.totalPage, //总页数
                    skin: '#C1C1C1',
                    prev: '上一题',
                    next: '下一题',
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调

                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            removeCheck();
                            funs();
                            //$('input').removeAttr('checked');
                            $('label').removeClass('curr');
                            $('label').removeClass('curr1');
                            getUserPageList(obj.curr);
                            removeCheck();
                        }
                    }
                });


            }
        });
    }
    var removeCheck = function () {
        $("input").removeAttr("checked");
    }
    removeCheck();
    getUserPageList();

</script>
</body>
</html>